<template>
    <div class="subject">
        <el-row>
            <el-col :span="24">
             <el-form :inline="true" :model="search">
                <el-form-item label="年级" :label-width="formLabelWidth">
                 <el-select
                   v-model="search.grade"
                   filterable
                   placeholder="请选择"
                 >
                   <el-option
                     v-for="item in grade"
                     :key="item.dictValue"
                     :label="item.dictLabel"
                     :value="item.dictValue"
                   >
                   </el-option>
                 </el-select>
                </el-form-item>
                 <el-form-item>
                   <el-button type="primary" @click="onSubmit">查询</el-button>
                 </el-form-item>
                
             </el-form>
            </el-col>
        </el-row>


        <el-dialog :title="title" :visible.sync="dialogFormVisible">
          <el-form :model="addSubject">
            <el-form-item label="学科" :label-width="formLabelWidth">
              <el-input v-model="addSubject.subject" autocomplete="off"></el-input>
            </el-form-item>
           <el-form-item label="年级" :label-width="formLabelWidth">
            <el-select
              v-model="addSubject.grade"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in grade"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
           </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" v-if="this.title == '新增'" @click="add">确 定</el-button>
            <el-button type="primary" v-else @click="update">修改</el-button>
          </div>
        </el-dialog>
        <el-button type="primary" @click="openlog">新增</el-button>
        <el-row>
            <el-col :span="24">
                <el-table :data="tableData" height="550" >

                   <el-table-column prop="id" label="Id"></el-table-column>
                   <el-table-column prop="subject" label="学科"></el-table-column>
                   <el-table-column  label="年级">
                       <template slot-scope="scope">
                           <span v-if="scope.row.grade ==0">一年级</span>
                           <span v-if="scope.row.grade ==1">二年级</span>
                           <span v-if="scope.row.grade ==2">三年级</span>
                           <span v-if="scope.row.grade ==3">四年级</span>
                           <span v-if="scope.row.grade ==4">五年级</span>
                           <span v-if="scope.row.grade ==5">六年级</span>
                           <span v-if="scope.row.grade ==6">初一</span>
                           <span v-if="scope.row.grade ==7">初二</span>
                           <span v-if="scope.row.grade ==8">初三</span>
                           <span v-if="scope.row.grade ==9">高一</span>
                           <span v-if="scope.row.grade ==10">高二</span>
                           <span v-if="scope.row.grade ==11">高三</span>
                       </template>

                   </el-table-column>
                   <el-table-column label="操作" width="200px">
                     <template slot-scope="scope">
                    <el-button type="text" @click="delsubjectById(scope.row)" >删除</el-button> 
                               <el-button type="text" @click="getSubject(scope.row)">编辑</el-button>
                     </template>
                   </el-table-column>
                 </el-table>
                <!-- 分页 -->
                <div class="block">
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[2, 4, 6, 8]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total" style="float:right">
                  </el-pagination>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    name: "Subject",
    data() {
        return {
            grade:[],
                    tableData:[],
                    formLabelWidth:"120px",
                    search:{
                        grade:""
                    },
                    addSubject:{
                      "grade": "",
                      "id": 0,
                      "subject": ""
                    },
                    dialogFormVisible:false,
                    pageNum:1,
                    pageSize:2,
                    total:null
                }
            },

    created(){
        this.initTable()
        this.findType()
    },
    methods:{
        //分页
        handleSizeChange(val) {
          this.pageSize = val;
          console.log(`每页 ${val} 条`);
          this.initTable();
        },
        handleCurrentChange(val) {
          this.pageNum = val;
          console.log(`当前页: ${val}`);
           this.initTable()
        },
        initTable(){
            axios.post("/api/subject/findSubjectList?pageNum="+this.pageNum+'&pageSize='+this.pageSize, this.search).then(res=>{
                this.tableData = res.data.data.items
                this.total = res.data.data.total
            })
        },
        findType(){
        axios.post("/api/sysdict/findSysDictBySex?type=sys_grade_status").then(res=>{
            this.grade = res.data.data
        })
        },
        onSubmit(){
            this.initTable();
        },
        delsubjectById(row){
          axios.delete("/api/subject/delSubjectById?id="+row.id).then(res=>{
            this.$message({
              message: res.data.message,
              type: 'success'
            });
               this.initTable();
          })
        },
        openlog(){
          this.title = '新增'
          this.dialogFormVisible = true
        },
        add(){
          axios.post("/api/subject/addSubject",this.addSubject).then(res=>{
          this.$message({
            message: res.data.message,
            type: 'success'
          });
             this.initTable();
          })
        },

        getSubject(row){
             this.dialogFormVisible = true
             this.addSubject = row
        },

        update(){
          axios.put("/api/subject/upSubject",this.addSubject).then(res=>{
            this.$message({
              message: res.data.message,
              type: 'success'
            });
          })
        }
    }
}
</script>

<style scoped>

</style>